<template>
  <div class="box1">
    <div class="title">
      <p>男女比例</p>
      <img src="../../images/dataScreen-title.png" alt="">
    </div>
    <div class="sex">
      <div class="man">
        <img src="../../images/man.png" alt="">
      </div>
      <div class="woman">
        <img src="../../images/woman.png" alt="">
      </div>
      
    </div>
    <div class="rate">
      <p>男士58%</p>
      <p>女士42%</p>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { POPPER_INJECTION_KEY } from 'element-plus';
import {ref,onMounted} from 'vue'
// 获取图形图表的dom节点
let charts = ref()
onMounted(()=>{
  //初始化echarts实例
  let mycharts = echarts.init(charts.value)
  // 设置配置项
  mycharts.setOption({
    // 标题组件
    /* title:{
      text:'男女比例', //主标题
      textStyle:{
        color:'skyblue', //主标题的颜色
      },
      left:'50%'
    }, */
    // x|y
    xAxis:{
      show:false,
      min:0,
      max:100
    },
    yAxis:{
      show:false,
      type:'category'
    },
    series:[
      {
        type:'bar',
        data:[58],
        barWidth:20,
        z:100,
        itemStyle:{
          color:'#0072FF',
          borderRadius:20
        }
      },
      {
        type:'bar',
        data:[100],
        barWidth:20,
        // 调整女士柱条的位置
        barGap:'-100%',
        itemStyle:{
          color:'#FF5C78',
          borderRadius:20
        }
      }
    ],
    grid:{
      left:0,
      top:0,
      right:0,
      bottom:0,
    }
  })
})
</script>

<style scoped lang="scss">
.box1{
  width:100%;
  height:100%;
  background:url(../../images/dataScreen-main-lc.png) no-repeat;
  background-size:100% 100%;
  margin:20px 0px;
  .title{
    p{
      color:white;
      font-size:20px;
    }
  }
  .sex{
    display:flex;
    justify-content: center;
    .man{
      width:111px;
      height:115px;
      margin:30px;
      background:url(../../images/man-bg.png) no-repeat;
      background-size: 100% 100%;
      display:flex;
      justify-content: center;
      align-items:center;
    }
    .woman{
      margin:30px;
      width:111px;
      height:115px;
      background:url(../../images/woman-bg.png) no-repeat;
      background-size: 100% 100%;
      display:flex;
      justify-content: center;
      align-items:center;
    }
  }
  .rate{
    display:flex;
    justify-content: space-between;
    color:white;
    margin:0 100px;
  }
  .charts{
    margin:0 100px;
    height:40px;
  }
}
</style>